<template>
	<div class="subpage resaledetail">
		<div class="pay-wrap" ref="paywrap">
			<resale-head :itemData="item"></resale-head>

			<div class="erbiaoId">
				<span>耳标ID</span>
				<span class="erbiao-detail" @click="toResaleEarId">详情 <img src="@/assets/img/home_img28.png" alt=""></span>
			</div>

			<div class="resale-box">
				<ul class="rasele-list">
					<li class="title">我要转售</li>
					<li>
						<div class="list-box">
							<span class="left">剩余数量</span>
							<span class="right acount">{{item.resaleQuantity}}头</span>
						</div>
					</li>
					<li style="padding-top: 3px;">
						<div class="list-box arrow-box">
							<van-field readonly clickable label="单价" placeholder="请填写单价" v-model="priceText" @click="showOverlay" />
							<van-icon name="arrow" tag="i" size="17px" color="#E5E5E5" />
						</div>
					</li>
					<li>
						<div class="list-box">
							<span class="left">整牛单价</span>
							<span class="right">{{ (price * item.productWeight).toFixed(2) }}元/头</span>
						</div>
					</li>
					<li class="stepper-box">
						<div class="list-box clearfix">
							<span class="left">转售数量</span>
							<span class="stepper-btn clearfix">
								<van-stepper :max="item.resaleQuantity" v-model="value" @plus="addAction" @minus="minusdAction" /></span>
						</div>
					</li>
					<li>
						<div class="list-box">
							<span class="left">转售总重量</span>
							<span class="right">{{product.product.totalWeight}}kg</span>
						</div>
					</li>
					<li class="pro-date">
						<div class="list-box">
							<span class="left">剩余交货时间</span>
							<span class="right"><i>{{item.deliveryMonth}}个月</i></span>
						</div>
					</li>
				</ul>
			</div>

			<div class="xy-box">
				<div class="radio-box">
					<van-icon name="checked" color="#31BC8D" size="22px" tag="em" v-if="isChecked" @click="isCheckedClick" />
					<van-icon name="circle" color="#999999" size="22px" tag="em" v-else @click="isCheckedClick" />
					<span>阅读且同意 <i @click="to">《友牧农场服务协议》</i></span>
				</div>
			</div>
		</div>
		
		<div class="footer">
			<!-- <div class="his">根据历史成交价格，预计在x年x月前成交。</div> -->
			<div class="btn-box">
				<div class="btn-cancel" @click="cancelResale">取消</div>
				<van-button round class="u-btn-default bind-btn" @click="shelvesAction">重新上架</van-button>
			</div>
		</div>
		

		<!-- 单价 -->
		<van-overlay :show="isOverlay" />
		<div class="isOverlay" v-show="isOverlay">
			<div class="overlay-head">
				设置单价
				<van-icon name="cross" color="#31BC8D" tag="i" @click="hideOverlay" />
			</div>
			<div class="overlay-content">
				<p>
					*平台推荐价-安格斯牛：30元/kg*
				</p>
				<div class="overlay-input">
					<van-field type="text" placeholder="请输入单价" v-model="newPrice" />
				</div>
				<div class="overlay-btn">
					<van-button round class="u-btn-default bind-btn" @click="comfirmPrice">确认</van-button>
				</div>
			</div>
		</div>
	
		<div class="cancel-resale" v-show="resaleCancelOverlay">
			<div class="resale-head">温馨提示</div>
			<p>是否要{{isResaleText}}转售商品？</p>
			<div class="cancel-btm">
				<span @click="resaleCancel">取消</span>
				<span @click="resaleConfim">确定</span>
			</div>
		</div>
		
		<van-overlay :show="resaleCancelOverlay" />
	</div>
</template>


<script>
	import Storage from "@/utils/storage";
	
	import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
	
	import ResaleHead from '../resalecomponent/ResaleHead.vue' //  头部
	import ResaleRecord from '../resalecomponent/ResaleRecord.vue'
	import Vue from 'vue';
	import { Stepper, Overlay, Dialog} from 'vant';
	Vue.use(Stepper).use(Overlay)
	export default {
		components: {
			ResaleHead,
			ResaleRecord,
			[Dialog.Component.name]: Dialog.Component
		},
		data() {
			return {
				resaleCancelOverlay: false,
				isResaleText: '',
				isChecked: false,
				isOverlay: false,
				weight: '',
				price: '',
				priceText: '',
				value: 1,
				newPrice: '',
				item: {
					
				},
				recordList: [],
				reordObj: {},
				idData: {}
			}
		},
		computed:{
			...mapState([
					'product'
				])
		},
		watch: {
			// 如果路由有变化，会再次执行该方法
			//  监听value变化  计算
			value: function(newVal,oldVal){
				if(newVal == ''){
					this.value = 1;
				}
				let weight = Number(this.value) * Number(this.weight * 1);  //  重量    数量 * 重量
				this.$store.commit('totalWeight', weight)
				let price = Number(this.value) * Number(this.price * 1);   // 牛肉费用  数量 * 单价
				this.$store.commit('totalPrice', price)
			},
			//  监听 牛肉重量
			weight: function(newVal,oldVal){
				let weight = Number(this.value) * Number(newVal * 1);  //  重量    数量 * 重量
				this.$store.commit('totalWeight', weight)
			},
			//  监听 牛肉金额
			price: function(newVal, oldVal){
				let price = Number(this.value) * Number(newVal * 1);   // 牛肉费用  数量 * 单价
				this.$store.commit('totalPrice', price)
			},
			newPrice: function(val){
				let price = val.match(/^\d*(\.?\d{0,2})/g)[0];
				this.newPrice = price;
			}
		},	
		created(){
			this.idData = JSON.parse(this.$route.query.item);
			this.getResaleDetail()   // 转售详情
			this.getResaleRecord()  // 转售记录
			// 如果进入耳标id页面，返回数据初始化，先存localStorage
			this.value = Storage.get('count');
			if(Storage.get('checkedXY')){
				this.isChecked = JSON.parse(Storage.get('checkedXY'));
			}
			if(Storage.get('price')){
				this.price = Storage.get('price');
				this.priceText = Storage.get('price') + '元/kg'
			}
		},
		methods: {
			to(){
				this.$router.push({
				name: 'supplyAgreement',
					query: {
						id: -1
					}
				})
			},
			resaleConfim(){
				if(this.isResaleText == '取消'){
					// 调取消转售接口
					console.log('取消转售')
					// 调取消转售接口
					this.$api.post('/api/resale/cancel',{resaleId: this.idData.resaleId})  // 从上个页面带过来的 转售id
					.then((res)=>{
						this.resaleCancelOverlay = false;
						this.$router.push({
							path: '/my/resale'
						})
					})
				}else {
					// 调上架接口 
					console.log('重新上架')
					// 调上架接口
					let postData = {
						resaleId: this.idData.resaleId,
						releaseState: 1,
						quantity: this.value,
						salePrice: this.price
					}
					console.log(postData)
					this.$api.post('/api/resale/release', postData)
					.then((res)=>{
						console.log(res)
						this.resaleCancelOverlay = false;
						this.$router.push({
							path: '/my/resale'
						})
					})
				}
			},	
			resaleCancel(){
				this.resaleCancelOverlay = false;
			},
			// 显示下架遮罩层
			cancelResale() {
				this.isResaleText = '取消'
				this.resaleCancelOverlay = true;
			},
			// 上架
			shelvesAction(){
				if(this.price == '' || this.priceText == ''){
					this.$tool.toast('请先填写单价')
					return
				}
				if(!this.isChecked){
					this.$tool.toast('请先阅读且同意《友牧农场服务协议》')
					return 
				}
				this.isResaleText = '上架'
				this.resaleCancelOverlay = true;
			},
			// 转售详情
			getResaleDetail(){
				this.$api.get('/api/resale/detail/' + this.$route.params.orderId) // 转售id
				.then(({data})=>{
					this.item = data;
					this.weight = this.item.productWeight;   // 重量
					console.log(this.item)
					if(Storage.get('price')) {  // 先判断浏览器是否有数据
						return
					} else {
						this.price = this.item.resaleSalePrice; // 单价
						this.priceText = this.item.resaleSalePrice + '元/kg'
					}
					
				})
			},
			// 转售记录
			getResaleRecord(){
				this.$api.get('/api/resale/record/' + this.$route.params.orderId, { pgCt: 1, pgSz: 10 })  // 转售id
				.then(({data})=>{
					this.recordList = data.userResaleDetailSellRecordVoIPage.records;
					this.reordObj.savesNum = data.savesNum;
					this.reordObj.sellOutNum = data.sellOutNum;
					this.reordObj.sellingNum = data.sellingNum;
				})
			},
			// 确定预售
			keepResale(){
				if(this.price == ''){
					this.$tool.toast('请先填写单价')
					return
				}
				if(!this.isChecked){
					this.$tool.toast('请先阅读且同意《友牧农场服务协议》')
					return 
				}
				let resaleData = {
					resaleId: this.$route.params.orderId,  // 转售id
					quantity: this.value,             // 数量
					salePrice: this.price				//  单价
				}
				
				this.$api.post('/api/resale/sell', resaleData)
				.then(({data})=>{
					// console.log(data)
					let proData = {
						productId: data.productId,  //  通过这id获取商品详情接口 /api/product/detail/{product_id}
						resaleId: data.resaleId    // 下单的id
					}
					this.$router.push({
						path: '/my/resaledetail/status/' + data.productId,
						query: { item: JSON.stringify(proData) }
					})
				})
			},
			// 阅读且同意
			isCheckedClick() {
				this.isChecked = !this.isChecked;
				Storage.set('checkedXY', this.isChecked)   //  存储 状态 
			},
			// 单价遮罩层
			showOverlay() {
				this.newPrice = '';
				this.isOverlay = true;
			},
			// 隐藏遮罩层
			hideOverlay() {
				this.newPrice = '';
				this.isOverlay = false;
			},
			// 浮动价格提示
			showfloatprcie(){
				this.$toast('有效价格为今日指导价上下浮动的10%')
			},
			// 遮罩层确认按钮
			comfirmPrice() {
				console.log(this.item.recommendPrice)
				if (this.newPrice == '') {
					this.$toast('单价不能为空')
					return
				} else if(this.newPrice == 0){
					this.$toast('单价不能为0')
					this.newPrice = ''
					return
				} else if(this.newPrice > 999){
					this.$toast('请输入有效金额');
					return
				} else if(this.newPrice > this.item.recommendPrice){  // 大于指导价
					this.$toast('您的报价过高，会影响您的转售成功')
				} else if(this.newPrice < this.item.recommendPrice){   // 小于指导价
					this.$toast('您的报价低于你的采购价会出现亏损哦～')
				}
				this.price = this.newPrice;
				this.priceText = this.price + '元/kg';
				Storage.set('price', this.price)
				this.isOverlay = false;
			},
			// 耳标id
			toResaleEarId() {
				this.$router.push({
					path: '/my/resaleearld/' + this.$route.params.orderId
				})
			},
			// 新增
			addAction() {
				++this.value;
				Storage.set('count', this.value)
			},
			//  减少   
			minusdAction() {
				--this.value;
				Storage.set('count', this.value)
			}
		},
		beforeDestroy(){
			Storage.set('count', Number(this.value));
			if(this.price !== ''){
				Storage.set('price', Number(this.price));
			}
		}
	}
</script>

<style>
	.resaledetail .resale-box .van-cell {
		padding: 0.26667rem 0;
		color: #5D6164;
		font-size: 16px;
	}

	.resaledetail .resale-box .van-cell__value {
		padding-left: 55px;
	}

	.resaledetail .resale-box .van-cell:not(:last-child)::after {
		border: none;
	}
</style>

<style lang="scss" scoped>
	@import './resaledetail.scss';
	.cancel-resale {
		width: 262px;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -131px;
		margin-top: -64px;
		z-index: 100;
	
		.resale-head {
			color: #344047;
			font-size: 16px;
			text-align: center;
			margin-top: 20px;
			font-weight: 500;
			margin-bottom: 14px;
		}
	
		p {
			text-align: center;
			color: #666;
			margin-bottom: 19px;
		}
	
		.cancel-btm {
			width: 100%;
			height: 42px;
			line-height: 42px;
			display: flex;
			border-top: 1px solid #e5e5e5;
	
			span {
				text-align: center;
				flex: 1;
	
				&:first-child {
					border-right: 1px solid #e5e5e5;
					color: #5D6164;
				}
	
				&:last-child {
					color: #31BC8D;
					font-size: 16px;
				}
			}
		}
	}
	$themecolor: #31BC8D;
	.pay-wrap {
		width: 100%;
		height: calc(100% - 63px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.footer {
		width: 100%;
		height: 63px;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		box-shadow: 2px 2px 5px #c2c2c2;
		-webkit-box-shadow: 2px 2px 5px #c2c2c2;
		.his{
			display: flex;
			width:100%;
			height:44px;
			line-height: 44px;
			background: rgba(255,241,218,1);
			color: #F58523;
			padding: 0 16px;
		}
		.btn-box{
			height: 63px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 16px;
			.btn-cancel{
				width: 144px;
				height: 51px;
				line-height: 51px;
				border-radius: 26px;
				color: #31BC8D;
				font-size: 16px;
				border: 1px solid #31BC8D;
				text-align: center;
			}
			.bind-btn {
				width: 144px;
				height: 51px;
				background: linear-gradient(90deg, #31BC8D 0%, #A6E29B 100%);
				border-radius: 26px;
				color: #fff;
				font-size: 16px;
				box-shadow: none;
			}
		}
	}
</style>
